<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        ol, ul {
            list-style: none;
        }
        .tab {
            height: 300px;
            width: 500px;
            margin: 80px auto;
            /*border: 1px solid red;*/
        }
        ol {
            height: 30px;
            overflow: hidden;
            margin-bottom: 4px;
        }
        ol li {
            width: 24%;
            height: 100%;
            float: left;
            margin-right: 3px;
            border: 1px solid blue;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="tab tab1">
        <ol>
            <li style="background-color: lightgreen;">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ol>
    </div>
    <div class="tab tab2">
        <ol>
            <li style="background-color: lightblue;">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ol>
    </div>
</body>
<script type="text/javascript">
    // 点中选项卡的类
    function Tab(h,w,color) {
        this.height = h + "px";
        this.width = w + "px";
        this.backgroundColor = function(){
            return color;
        };
    }
    /*Tab.prototype.backgroundColor = function(color){
        return color;
    }*/

    // 实例化点击的选项卡
    var tabNum1 = new Tab(26,80,"lightgreen");
    var tabNum2 = new Tab(26,50,"lightblue");

    var oLi1 = document.querySelectorAll(".tab1 ol li");
    var oLi2 = document.querySelectorAll(".tab2 ol li");

    function clickAct(oLinum, whichTab) {
        for (let i = 0; i < oLinum.length; i++) {
            oLinum[i].index = i;
            oLinum[i].onclick = function() {
                for (let i = 0; i < oLinum.length; i++) {
                    oLinum[i].style.width = "24%";
                    oLinum[i].style.height = "100%";
                    oLinum[i].style.backgroundColor = "red";
                }
                oLinum[this.index].style.height = whichTab.height;
                oLinum[this.index].style.width = whichTab.width;
                oLinum[this.index].style.backgroundColor = whichTab.backgroundColor();
                // oLinum[this.index].style.backgroundColor = whichTab.backgroundColor("lightgreen");
            }
        }
    }
    
    clickAct(oLi1, tabNum1);
    clickAct(oLi2, tabNum2);
</script>
